<template>
  <div>
    <el-form ref="attrForm" :model="attr" :rules="rules">
      <el-form-item label="属性名" label-width="70px" prop="attrName">
        <el-input v-model="attr.attrName" placeholder="请输入属性名" style="width:400px" />
      </el-form-item>
      <el-form-item label="">
        <el-button type="primary" icon="el-icon-plus" :disabled="!attr.attrName" @click="addAttrValue">添加属性值</el-button>
      </el-form-item>
    </el-form>
    <el-table :data="attr.attrValueList" border style="margin-bottom:20px">
      <el-table-column label="序号" width="80px" type="index" align="center" />
      <el-table-column label="属性值名称">
        <template v-slot="{row,$index}">
          <el-input :ref="$index" v-model="row.valueName" placeholder="请输入详细属性值" size="mini" @blur="isDelCurrentValue(row,$index)" />
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template v-slot="{row,$index}">
          <el-popconfirm confirm-button-text="确定" cancel-button-text="取消" icon="el-icon-info" icon-color="red" title="您真的要删除此项属性值吗？" @onConfirm="deleteCurrentAttrValue(row,$index)">
            <el-tooltip slot="reference" content="删除属性值" placement="top">
              <el-button type="danger" icon="el-icon-delete" size="mini" />
            </el-tooltip>
          </el-popconfirm>
        </template>
      </el-table-column>
    </el-table>

    <el-button type="primary" @click="submitForm">确定</el-button>
    <el-button @click="$emit('setIsShowAttrList', true)">取消</el-button>
  </div>
</template>

<script>
import { reqSaveOrUpdateAttrInfo } from '@/api/product/attr'
import { mapState } from 'vuex'
export default {
  name: 'SaveAttr',
  props: {
    attrValue: {
      type: Object,
      // required: true
      // 添加一个默认值，为了实现一个正常的添加功能
      default: () => ({
        attrName: '',
        attrValueList: []
      })
    }
  },
  data() {
    // 在此处写自定义校验规则
    // const validatorAttrValueList = (rule, value, callback) => {
    //   // rule 是原来校验的规则 ，比如说required...
    //   // value 是待校验的值
    //   // callback 是一个回调函数，可以添加错误的时候，如果里面有参数，说明需要进行错误提示，如果里面没有参数，则说明校验通过
    //   // console.log(rule, value)
    //   if (!value.length) {
    //     callback(new Error('数组中不能为空，应该至少添加一个属性值'))
    //     return // 阻止代码向下执行
    //   }
    //   callback() // 里面什么参数都没有 则显示校验通过 但是一定要调用一下
    // }
    return {
      // attr: {
      //   attrName: '', // 属性名称
      //   attrValueList: []
      //   // categoryId: '',
      //   // categoryLevel: 3
      // },
      attr: this.attrValue, // 如果有值传递过来，就给attr赋值，如果没有呢，则用默认的传递过来的
      rules: {
        attrName: [{ required: true, message: '请输入属性名称', trigger: 'blur' }]
      }
    }
  },
  computed: {
    ...mapState('category', ['category3Id'])
  },
  methods: {
    // 1. 添加属性和详情属性值  此属性当中，可能会有很多个详细属性值
    addAttrValue() {
      this.attr.attrValueList.push({
        valueName: ''
      })
      this.$nextTick(() => {
        this.$refs[this.attr.attrValueList.length - 1].focus()
      })
      // 始终给最新添加的那一个输入框获得焦点
    },
    // 2. 失去焦点时要删除此属性值
    isDelCurrentValue(row, index) {
      // 是否删除当前这一项属性值，需要判断一下，如果没有添加属性值就失去焦点的话，就需要删除此项，以防没有输入值又被你单击'添加属性'按钮
      if (!row.valueName) {
        // this.attr.attrValueList.splice(index, 1)
        this.attr.attrValueList.pop() // 删除数组中最后一项
      }
    },
    // 3. 添加更新属性
    submitForm() {
      // this.$refs['attrFrom'].validate(valid => {
      this.$refs.attrForm.validate(async (valid) => {
        if (valid) {
          // alert('submit!')
          if (!this.attr.attrValueList.length) {
            this.$message.error('请至少添加一个属性值...')
            return
          }
          // alert('submit!')
          const { attrName, attrValueList, id } = this.attr
          const { category3Id } = this
          // const result = await reqSaveAttrInfo({
          const result = await reqSaveOrUpdateAttrInfo({
            attrName,
            attrValueList,
            categoryId: category3Id,
            categoryLevel: 3,
            id // 如果没有值的话，发送请求的时候，会自动过滤掉此属性
          })
          if (result.code === 200) {
            this.$message({
              type: 'success',
              message: `${id ? '修改' : '添加'}属性成功`
            })
            // 跳转到列表页面
            this.$emit('setIsShowAttrList', true)
          } else {
            this.$message.error('添加属性列表失败...')
          }
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 4. 删除当前属性值
    deleteCurrentAttrValue(row, index) {
      // 是将当前属性从数组中删除
      this.attr.attrValueList.splice(index, 1)
    }
  }
}
</script>

<style>
</style>
